<template>
    <div class="home" style="position: relative;">
        <!-- 头部地址定位 -->
        <div class="header">
            <!-- 路由点击跳转 -->
            <div class="address_map h5lineHeight" @click="toVaddress({name:'vaddress',params:{city:city}})">
                <i class="fa fa-map-marker"></i>             
                <span>{{address}}</span>
                <i class="fa fa-sort-desc"></i>
            </div>
        </div>
        <!-- 搜索框 -->
        <div class="search_wrap" :class="{'fixedview':showFilter}" @click="$router.push('/search')">
            <div class="shop_search">
                <i class="fa fa-search"></i>
                    搜索商家 商家名称
            </div>
        </div>
            <div class="container">
                <!-- 轮播 -->
                <mt-swipe :auto="4000" class="swiper" >
                    <mt-swipe-item v-for="(img,index) in swipeImgs" :key='index'>
                        <img v-lazy="img">
                    </mt-swipe-item>
                  </mt-swipe>
                <!-- 分类 -->
                <mt-swipe :auto="0" class="entries">
                    <mt-swipe-item v-for="(entry,i) in entries" :key='i' class="entry_wrap">
                        <div class="foodentry" v-for="(item,index) in entry" :key="index">
                            <div class="img_wrap">
                                <img :src="item.image">
                            </div>
                            <span>{{item.name}}</span>
                        </div>
                    </mt-swipe-item>
                  </mt-swipe>
            </div>
            <!-- 推荐商家 -->
            <div class="shoplist-title">推荐商家</div>
            <!-- 综合排序的导航 -->
            <vfilter :vfilterData="vfilterData" @searchFixed="showFilterView" @update='update' :isSearchNext='isSearchNext'/>
            <!-- 商家信息 -->
                <div class="shopList" style="height: auto;">
                <indexShop v-for="(item,index) in restaurants" :key="index" :restaurant="item.restaurant"/>
            </div>
            <!-- 45px遮盖tabbar -->
            <div style="height: 45px;"></div>
            <tabBar :data='tabBarData'/>
        </div>
        
</template>

<script>
    import {
        getShopping,
        getFilter,
    } from '../networks/api.js';
    import {
        Swipe,
        SwipeItem,
        Loadmore,
        InfiniteScroll
    } from 'mint-ui';
    import vfilter from '../components/vfilter.vue';
    import indexShop from '../components/indexShop.vue';
    import axInstance from '../networks/require.js';
    import tabBar from '../components/tabBar.vue'
    export default {
        name: 'home',
        data() {
            return {
                swipeImgs: [],
                entries: [],
                vfilterData: null,
                showFilter: false, //判断搜索框是否往上提，默认不
                page: 1, //post请求的页数
                size: 5, //post请求的条数
                totalnum: 4, //后台数据页数
                restaurants: [], //存放所有商家容器
                allLoaded: false, //判断是否都加载完了
                bottomPullText: "上拉加载更多",
                rank: null, //定义排序接受的规则
                isSearchNext: false,
                tabBarData: [{
                    title: "首页",
                    icon: 'home',
                    path: '/home'
                }, {
                    title: "订单",
                    icon: 'file-text-o',
                    path: '/order'
                }, {
                    title: "我的",
                    icon: 'user',
                    path: '/me'
                }]
            }
        },
        created() {
            //页面一加载到home发送请求(轮播、小轮播、推荐商家)
            this.getData();

        },
        mounted() {
            window.addEventListener("scroll", this.handleScroll, true);

        },
        computed: {
            address() {
                return this.$store.getters.address
            },
            city() {
                return (this.$store.getters.location.addressComponens.city || this.$store.getters.location.addressComponens.province)
                
            }
        },
        methods: {
            toVaddress(pushObj) {
                this.$router.push(pushObj);
            },
            //页面一加载到home发送请求
            getData() {
                getShopping().then(res => {
                    this.swipeImgs = res.data.data.swipeImgs;
                    this.entries = res.data.data.entries
                });
                getFilter().then(res => {
                    this.vfilterData = res.data.data;
                    //console.log(this.vfilterData);
                });
                this.getShopListFrist();
            },
            //isShow是父组件searchFixed事件传过来的ture值
            showFilterView(isShow) {
                this.showFilter = isShow
            },
            //进入首页第一次获取
            getShopListFrist() {
                this.page = 1;
                axInstance.post(`/getRestaurants/${this.page}/${this.size}`, this.rank).then(res => {
                    //当数据请求完成后，加载中的字眼就没了
                    this.restaurants = res.data.data;
                    console.log(this.restaurants);
                    console.log(res.data);
                });
            },
            //上拉刷新执行的方法
            loadMore() {
                this.page++;
                axInstance.post(`/getRestaurants/${this.page}/${this.size}`, this.rank).then(res => {
                    if (res.data.data) {
                        res.data.data.forEach(item => {
                            this.restaurants.push(item);
                        })
                    }
                });
            },
            update(condition) {
                console.log(condition);
                this.rank = condition;
                this.getShopListFrist()

            },
            // 滑动触发的事件
            handleScroll() {
                // 滚动条距离顶部的距离,也是滚动高度
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                // 可视区高度
                var windowHeitht = document.documentElement.clientHeight + 1 || document.body.clientHeight + 1;
                // 滚动条的总高度
                var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
                // 搜索框距离顶部的距离
                let searchWrap = document.querySelector('.search_wrap').offsetTop;
                // 综+距+品+筛距离顶部的位置
                let filter = document.querySelector('.vfilter_wrap').offsetTop;
                //搜索框的高度
                let searchWrapHeight = document.querySelector('.search_wrap').offsetHeight;
                //获取推荐商家模块距离顶部的距离
                let shoplistTitle = document.querySelector('.shoplist-title').offsetTop;
                //是否滚动到底部的判断，实现上拉加载
                console.log("滚动高度", scrollTop);
                console.log("可视区高度", windowHeitht);
                console.log("滚动条的总高度", scrollHeight);
                console.log("搜索框距离顶部的距离", searchWrap);
                console.log("综+距+品+筛距离顶部的位置", scrollTop);
                console.log("搜索框的高度", searchWrapHeight);
                console.log("推荐商家模块距离顶部的距离", shoplistTitle);
                if (scrollTop + windowHeitht >= scrollHeight) {
                    if (this.page <= this.totalnum) {
                        this.loadMore();
                    } else {
                        return;
                    }
                };
                //上拉时搜索框定位在最上方
                if (scrollTop >= searchWrap) {
                    this.showFilter = true;
                };
                if (scrollTop <= searchWrap) {
                    this.showFilter = false;
                };
                //上拉到商品列表时过滤的组件到搜索框下面
                if (scrollTop >= filter - searchWrapHeight) {
                    this.isSearchNext = true
                };
                if (scrollTop <= shoplistTitle - filter) {
                    this.isSearchNext = false
                };
            }
        },
        components: {
            vfilter,
            indexShop,
            tabBar
        }
    }
</script>
<style>
    .home {
        width: 100%;
        height: 100%;
        overflow: auto;
        box-sizing: border-box;
    }
    
    .header,
    .search_wrap {
        background-color: #009eef;
        padding: 10px 16px;
    }
    
    .header .address_map {
        color: #fff;
        font-weight: bold;
    }
    /* 解决不同移动端字体偏上 */
    
    .h5lineHeight {
        display: flex;
        align-items: center;
        justify-content: left;
        line-height: normal;
    }
    
    .address_map i {
        margin: 0 3px;
        font-size: 18px;
    }
    
    .address_map span {
        display: inline-block;
        width: 80%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    
    .search_wrap .shop_search {
        /* margin-top: 10px; */
        background-color: #fff;
        padding: 10px 0;
        border-radius: 4px;
        text-align: center;
        color: #aaa;
    }
    
    .search_wrap {
        position: sticky;
        top: 0px;
        z-index: 999;
        box-sizing: border-box;
    }
    
    .swiper {
        height: 100px;
    }
    
    .swiper img {
        width: 100%;
        height: 100px;
    }
    
    .entries {
        background: #fff;
        height: 47.2vw;
        text-align: center;
        overflow: hidden;
    }
    
    .foodentry {
        width: 20%;
        float: left;
        position: relative;
        margin-top: 2.933333vw;
    }
    
    .foodentry .img_wrap {
        position: relative;
        display: inline-block;
        width: 12vw;
        height: 12vw;
    }
    
    .img_wrap img {
        width: 100%;
        height: 100%;
    }
    
    .foodentry span {
        display: block;
        color: #666;
        font-size: 0.72rem;
    }
    /* 推荐商家 */
    
    .shoplist-title {
        display: flex;
        align-items: flex;
        justify-content: center;
        height: 9.6vw;
        line-height: 9.6vw;
        font-size: 16px;
        color: #333;
        background: #fff;
    }
    
    .shoplist-title:after,
    .shoplist-title:before {
        display: block;
        content: "一";
        width: 5.333333vw;
        height: 0.266667vw;
        color: #999;
    }
    
    .shoplist-title:before {
        margin-right: 3.466667vw;
    }
    
    .shoplist-title:after {
        margin-left: 3.466667vw;
    }
    /* 点击综合排序后定位消失，搜索框放最上面 */
    
    .fixedview {
        width: 100%;
        position: fixed;
        top: 0px;
        z-index: 999;
    }
</style>
</style>
</style>
</style>